<template>
    <a-spin :spinning="spinning">
        <div class="container" ref="container">
        </div>
    </a-spin>

</template>
<script setup>
import { ref } from "vue";
import { nanoid } from "nanoid";

const container = ref()

const spinning = ref(false)

let iframe = null;


const createIframe = async (product) => {
    spinning.value = true;
    //创建一把
    iframe = document.createElement('iframe');
    iframe.id = "fm-" + nanoid(5)
    iframe.name = iframe.id;
    iframe.frameBorder = "0";
    iframe.allow = "fullscreen";
    iframe.width = "0";
    iframe.height = "0";
    // config.value.spinning = true;
    // let vHtml = await processComponentApi.getHtml(props.component.type, getVersion());
    // if (!vHtml) {
    // vHtml = "<div>该组件没有找到视图</div>";
    // }
    // vHtml = buildHtml(vHtml)

    // const blob = new Blob([vHtml], {
    // type: "text/html"
    // });
    // let objectURL = window.URL.createObjectURL(blob);
    iframe.src = "/api/doc.html";
    //追加进去
    container.value.append(iframe);
    iframe.onload = async () => {
        // frameLoadEvent();
        let document = iframe.contentWindow.document;
        document.querySelector("#app > div > section > section > header > div > i").click()
        let d = await selectElement(document, "#app > div > section > aside > div > div.knife4j-logo-data > a > div");
        d.click()

        // setInterval(()=>{
        //     d.click()
        // },100)

        // d = await selectElement(document, "ul[role='menu']");
        // let lis = d.querySelectorAll("li");
        // console.log(lis)
        // for (let li of lis) {
        //     if (li.innerText != "主页") {
        //         li.remove()
        //     }
        // }
        // d.remove("li")


        d = await selectElementText(document, ".knife4j-menu > ul[role='menu']", "文档管理");
        d.innerHTML = "";

        d = await selectElement(document, "ul[role='listbox']");

        let lis = d.querySelectorAll("li");

        for (let li of lis) {
            if (li.innerHTML == product.productCode) {
                li.click()
                break
            }
        }

        // d = await selectElement(document,"#app > div > section > section > div > div.ant-tabs-content.ant-tabs-content-no-animated.ant-tabs-top-content.ant-tabs-card-content > div > main > div > div > div.description > div:nth-child(13) > div.ant-col.ant-col-19 > span");
        d = await selectElementText(document, ".knife4j-menu > ul[role='menu']", "文档管理");
        console.log(d)
        // setTimeout(async () => {
        d.querySelector("div").click()

        d = await selectElementText(document, "#app > div > section > aside > div > div.knife4j-menu > ul > li.ant-menu-submenu.ant-menu-submenu-inline.ant-menu-submenu-open > ul[role='menu']", "离线文档")

        d.querySelector("a").click()

        d = await selectElement(document, "#app > div > section > section > div > div.ant-tabs-content.ant-tabs-content-no-animated.ant-tabs-top-content.ant-tabs-card-content > div.ant-tabs-tabpane.ant-tabs-tabpane-active > main > div > div.knife4j-download-button.ant-row > button:nth-child(3)");
        d.click()

        setTimeout(() => {
            // iframe.remove();
        }, 10000);
        spinning.value = false;
        // }, 2000);

        // d.click()
        // console.log(d)
        //关闭loading
        // config.value.spinning = false;
    }
}

const isElementInDocument = (document, element) => {
    return document.body.contains(element);
}

const selectElementText = async (document, selector, text) => {

    return new Promise(async (resolve, reject) => {
        let result = null;
        let d = await selectElement(document, selector);
        let lis = d.querySelectorAll("li");
        for (let li of lis) {
            if (li.innerText == text) {
                result = li;
            }
        }
        if (result && isElementInDocument(document, result)) {
            resolve(result)
        } else {
            setTimeout(async () => {
                let d = await selectElementText(document, selector, text);
                if (d) {
                    resolve(d)
                }
            }, 200);
        }
    })


}
const selectElement = async (document, selector) => {

    return new Promise((resolve, reject) => {
        let d = document.querySelector(selector);
        if (d) {
            resolve(d)
        } else {
            setTimeout(async () => {
                let d = await selectElement(document, selector);
                if (d) {
                    resolve(d)
                }
            }, 200);
        }
    })

}

const exportDoc = async (product) => {
    console.log(product)
  await createIframe(product);
}

defineExpose({
    exportDoc
})
</script>


<style scoped></style>
